<template>
  <div class="div">
    <!-- 头部标题栏   --今日油价   -->
    <mt-header fixed title="今日油价"></mt-header>

    <!-- 轮播 -->
    <mt-tab-container style="top: 11vh">
      <mt-tab-container-item>
        <change-date />
        <city @ab="receiveMsg" />
      </mt-tab-container-item>
    </mt-tab-container>
    <mt-navbar v-model="actived" style="margin-top: 13vh">
      <mt-tab-item id="1">
        <span class="you">汽油</span>
      </mt-tab-item>
      <mt-tab-item id="2">
        <span class="you">柴油</span>
      </mt-tab-item>
    </mt-navbar>

    <!-- 面板部分1 -->
    <mt-tab-container v-model="actived">
      <!-- 调价日  +  地区位置 -->
      <mt-tab-container-item id="1">
        <!-- <mt-cell :title="`调价日期:${data.newtime}`"></mt-cell> -->
        <qi-you :date="date" :v="v" />
      </mt-tab-container-item>
      <mt-tab-container-item id="2">
        <cai-you :date="date" :v="v" />
      </mt-tab-container-item>
    </mt-tab-container>

    <!-- 出行定位地图 -->
    <div class="dh">
      <img src="../assets/daohang_0.png" alt="" @click="daohang" />
    </div>
  </div>
</template>

<script>
import ChangeDate from "@/components/ChangeDate.vue";
import QiYou from "@/components/QiYou.vue";
import CaiYou from "@/components/CaiYou.vue";
import City from "@/components/City.vue";

// import { mapState } from "vuex";
export default {
  components: { ChangeDate, QiYou, CaiYou, City },
  data() {
    return {
      actived: "1",
      selected: this.$route.path.split("/").pop(), //底部选项卡的默认选中项
      data: {},
      d: "",
      date: {},
      v: {},
    };
  },
  mounted() {
    this.$indicator.open({
      text: "加载中...",
      spinnerType: "fading-circle",
    });
    this.axios.get("v1/family?pname=安徽").then((res) => {
      console.log(res);
      this.date = res.data[0];
      this.v = res.data[1];

      this.$indicator.close();
    });
    this.getData();
  },
  methods: {
    daohang() {
      this.$router.push("/goingoil");
      // this.getMap();
      let d = this.diqu;
      console.log(d);
    },
    getData() {
      this.axios.get("v1/swiper/lun").then((res) => {
        console.log("日期", res);
        this.data = res.data[0];
      });
    },
    //父制作一个方法，用于传递给子
    receiveMsg(msg) {
      console.log("来自子的消息:", msg);
      if (msg == undefined) return;

      this.$indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle",
      });
      this.axios.get(`/v1/family?pname=${msg}`).then((res) => {
        console.log(res);
        this.date = res.data[0];
        this.v = res.data[1];

        this.$indicator.close();
      });
    },
  },
};
</script>

<style scoped>
.mint-header {
  height: 10vh;
  background-color: #db261d;
  font-size: 1.4em;
}
.mint-tabbar > .mint-tab-item.is-selected {
  color: #db261d;
}
.dh > img {
  width: 60px;
  height: 60px;
  position: fixed;
  bottom: 14vh;
  right: 6vw;
}

/* 导航栏样式 */
.mint-navbar {
  background-color: #db261d;
  color: #fff;
  margin: 0 3px;
  border-radius: 20px;
}
.you {
  font-size: 1.6em;
}
.mint-navbar .mint-tab-item.is-selected {
  border-bottom: none;
  color: #db261d;
  background-color: #fff;
  border: 3px solid #db261d;
  border-radius: 20px;
  margin-bottom: 0px;
}
</style>
